<template>
  <div class="personal-center-container">
    <el-row :gutter="20">
      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
        <el-card shadow="hover">
          <div class="personal-center-user-info">
            <el-avatar :size="100" :src="form.avatar" @click.native="openDialog"/>
            <div class="personal-center-user-info-full-name">
              {{ form.nickname }}
            </div>
<!--            <div class="personal-center-user-info-description">-->
<!--              {{ form.account }}-->
<!--            </div>-->
            <div class="personal-center-user-info-follow">
                <el-button round type="primary">
                  <vab-icon icon="group-line"/>
                  {{ form.role }}
                </el-button>
            </div>

            <ul class="personal-center-user-info-list">
              <li>
                <vab-icon icon="user-3-line"/>
                {{ form.account }}
              </li>
              <li>
                <vab-icon icon="cellphone-fill"/>
                {{ form.phone }}
              </li>
              <li>
                <vab-icon icon="time-line"/>
                {{ form.last_login_time }}
              </li>
              <li>
                <el-divider/>
                <h5>访问权限</h5>
                <el-tag size="small" :key="index" v-for="(item,index) in moduleList">{{ item.module_name }}</el-tag>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
        <el-card shadow="hover">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form ref="form" label-width="80px" :model="form" :rules="rules">
                  <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="form.nickname"/>
                  </el-form-item>
                  <el-form-item label="电话" prop="phone">
                    <el-input v-model="form.phone"/>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="updateAdminInfo">保存</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="third">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form ref="formPwd" label-width="80px" :model="password" :rules="rulesPwd">
                  <el-form-item label="旧密码" prop="old">
                    <el-input v-model="password.old" type="password"/>
                  </el-form-item>
                  <el-form-item label="新密码" prop="new">
                    <el-input v-model="password.new" type="password"/>
                  </el-form-item>
                  <el-form-item label="再次确认" prop="checkNew">
                    <el-input v-model="password.checkNew" type="password"/>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="updatePwd">保存</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <vab-cropper ref="vabCropper" @fetch-data="updateAvatar" :avatar-url="form.avatar"/>
  </div>
</template>

<script>
import {getUserInfo, udpatePwd, updateUserInfo} from '@/api/manage/personalCenter'
import {mapGetters} from 'vuex'
import VabCropper from '@/extra/VabCropper'

export default {
  name: 'PersonalCenter',
  components: {VabCropper},
  data() {
    return {
      activeName: 'first',
      moduleList: [],
      form: {
        nickname: '',
        avatar: '',
        phone: '',
        last_login_time: '',
      },
      password: {
        old: '',
        new: '',
        checkNew: ''
      },
      rules: {
        nickname: [{required: true, trigger: 'blur', message: '请输入昵称'}],
        phone: [{required: true, trigger: 'blur', message: '请输入电话号码'}],
      },
      rulesPwd: {
        old: [{required: true, trigger: 'blur', message: '请输入旧密码'}],
        new: [{required: true, trigger: 'blur', message: '请输入新密码'}],
        checkNew: [{required: true, trigger: 'blur', message: '请再次输入新密码'}],

      }
    }
  },
  computed: {
    ...mapGetters({
      avatar: 'user/avatar',
    }),
  },
  created() {
    this.getAdminInfo()
  },
  methods: {
    updateAvatar(value){
      this.form.avatar =  value
    },
    onSubmit() {
      this.$baseMessage('模拟保存成功', 'success', 'vab-hey-message-success')
    },
    openDialog() {
      this.$refs['vabCropper'].dialogVisible = true
    },
    getAdminInfo() {
      getUserInfo().then(response => {
        this.form = response.data.adminInfo
        this.moduleList = response.data.moduleList
      })
    },
    updateAdminInfo() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          var data = {
            phone: this.form.phone,
            nickname: this.form.nickname
          }
          updateUserInfo(data).then(response => {
            this.$baseMessage(response.msg, 'success', 'vab-hey-message-success')
          })
        }
      })
    },
    updatePwd() {
      this.$refs['formPwd'].validate(async (valid) => {
        if (valid) {
          udpatePwd(this.password).then(response => {
            this.$baseMessage(response.msg, 'success', 'vab-hey-message-success')
          })
        }
      })
    }

  },
}
</script>

<style lang="scss" scoped>
$base: '.personal-center';
#{$base}-container {
  padding: 0 !important;
  background: $base-color-background !important;

  #{$base}-user-info {
    padding: $base-padding;
    text-align: center;

    ::v-deep {
      .el-avatar {
        img {
          cursor: pointer;
        }
      }
    }

    &-full-name {
      margin-top: 15px;
      font-size: 24px;
      font-weight: 500;
      color: #262626;
    }

    &-description {
      margin-top: 8px;
    }

    &-follow {
      margin-top: 15px;
    }

    &-list {
      margin-top: 18px;
      line-height: 30px;
      text-align: left;
      list-style: none;

      h5 {
        margin: -20px 0 5px 0;
      }

      ::v-deep {
        .el-tag {
          margin-right: 10px !important;
        }

        .el-tag + .el-tag {
          margin-left: 0;
        }
      }
    }
  }

  #{$base}-item {
    display: flex;

    i {
      font-size: 40px;
    }

    &-content {
      box-sizing: border-box;
      flex: 1;
      margin-left: $base-margin;

      &-second {
        margin-top: 8px;
      }
    }
  }
}
</style>
